<template>
	<view class="settlement" :style="{'height':minH}">
		<view :style="{'height':(winH-btnBoxH)+'px','overflow-y':'auto'}">
			<view class="settlement-box">
				<!-- 选择地址 -->
				<view class="address-sel set-box">
					<view class="box-left">
						<view class="box-title address-title">
							<text>{{address.firstName}}</text>
							<text>{{address.lastName}}</text>
							<text>{{address.phone}}</text>
						</view>
						<view class="box-desc">
							{{address.address}}
						</view>
					</view>
					<view class="box-right">
						<image src="../../static/images/icon/arrow_right.svg" mode=""></image>
					</view>
				</view>
				
				<!-- 优惠吗 -->
				<view class="set-box">
					<view class="box-left">
						<view class="box-title">
							<text>优惠码</text>
						</view>
						<view class="box-desc">
							<text>可输入优惠码并使用</text>
						</view>
					</view>
					<view class="box-right">
						<image src="../../static/images/icon/arrow_right.svg" mode=""></image>
					</view>
				</view>
				
				<!-- 支付方式 -->
				<view class="set-box">
					<view class="box-left">
						<view class="box-title">
							<text>支付方式</text>
						</view>
						<view class="box-desc">
							<text>微信支付</text>
						</view>
					</view>
					<view class="box-right">
						<image src="../../static/images/icon/arrow_right.svg" mode=""></image>
					</view>
				</view>
				
				<!-- 支付方式 -->
				<view class="goods-list">
					<view class="goods-title">
						预计4-7天送达
					</view>
					<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
						<view class="goods-img">
							image
						</view>
						<view class="goods-detail">
							<view class="goods-name goods-line">
								<text>{{item.name}}</text>
							</view>
							<view class="goods-sku goods-line">
								<text>尺码：{{item.sku}}</text>
								<text>|</text>
								<text>数量：{{item.num}}</text>
							</view>
							<view class="goods-price goods-line">
								<text>￥{{item.price}}</text>
							</view>
						</view>
					</view>
					<!-- 派送 -->
					<view class="send-desc">
						<text>购买请请确认：</text>
					</view>
				</view>
			</view>
		</view>
		<view class="info-btn">
			<view class="pay-btn">
				<view class="pay-price">
					<view class="total-price">
						<view class="line-price">
							<text class="lebel">小计</text>
							<text class="amount">￥4554</text>
						</view>
						<view class="line-price">
							<text class="lebel">运费</text>
							<text class="amount">￥0.00</text>
						</view>
					</view>
					<view class="total-price price-pay">
						<view class="line-price">
							<text class="pay-amount">￥5542</text>
						</view>
						<view class="line-price">
							<text class="pay-amount-desc">价格已包含关税</text>
						</view>
					</view>
				</view>
				<view class="btn">
					<button type="default" class="wss-btn" @click="handleBag">确认下单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winH: 0,
				btnBoxH: 0,
				address: {
					isDefault: 0,
					firstName: 'asc',
					lastName: 'sky',
					phone: '13078801215',
					address: '省，市，区，地址'
				},
				goodsList: [
					{
						id:"2",
						title: '1项商品配送自香港特别行政区',
						image: '',
						name: 'Jcquemus',
						spec: '短款寸衫',
						price: 2222.00,
						num: 2,
						sku: '34'
					},
					{
						id:"3",
						title: '1项商品配送自香港特别行政区',
						image: '',
						name: 'Jcquemus',
						spec: '短款寸衫',
						price: 2222.00,
						num: 3,
						sku: '34'
					}
				]
			}
		},
		onLoad(options) {
			
		},
		mounted() {
			this.initH()
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		},
		methods: {
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
				    }
				});
				let autoScroll1 = uni.createSelectorQuery().select('.info-btn')
				autoScroll1.boundingClientRect(z => {
					if(z && z.height) {
						_self.btnBoxH = z.height
						console.log(z.height)
					}
				}).exec()
			}
		}
	}
</script>

<style scoped lang="scss">
.settlement {
	background-color: #f5f5f5;
	.settlement-box {
		.address-title {
			font-weight: 550;
			text {
				margin-right: 10rpx;
			}
		}
		.set-box {
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid $uni-border-color;
			padding: 40rpx;
			.box-desc {
				margin-top: 10rpx;
			}
			.box-right {
				width: 48rpx;
				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
		.goods-list {
			background-color: #FFFFFF;
			padding: 40rpx;
			.goods-title {
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid $uni-border-color;
			}
			.goods-item {
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1rpx solid $uni-border-color;
				.goods-detail {
					margin-left: 20rpx;
					.goods-name {
						font-size: 30rpx;
						font-weight: 550;
					}
					.goods-line {
						margin-top: 10rpx;
					}
				}
			}
			.send-desc {
				padding: 40rpx 0;
				font-size: 24rpx;
				color: #949494;
			}
		}
	}
	
	.info-btn {
		position: relative;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		.pay-btn {
			padding: 20rpx 40rpx 20rpx 40rpx;
			.pay-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.total-price {
					margin-bottom: 20rpx;
					font-size: 24rpx;
					.line-price {
						margin-top: 10rpx;
					}
					.pay-amount {
						font-size: 32rpx;
						font-weight: 550;
					}
					.pay-amount-desc {
						color: #949494;
					}
				}
				.price-pay {
					text-align: right;
				}
			}
			button {
				background-color: black;
				color: #FFFFFF;
				border-radius: 0;
				width: 100%;
			}
		}
	}
}
</style>
